<template>
  <div>
    <div class="filter-bar-sys-top">
      <el-row type="flex" class="system-search">
        <el-col :span="22">告警名称：&nbsp;&nbsp;&nbsp;{{alarmName}}</el-col>
        <el-col :span="2" style="text-align: right;">
          <el-button type="primary" size="small" class="el-icon-plus" @click="newStrategy"> 新建策略</el-button>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col>告警描述：&nbsp;&nbsp;&nbsp;{{alarmDesc}}</el-col>
      </el-row>
      <el-row type="flex">
        <el-col>告警目标：&nbsp;&nbsp;&nbsp;{{target}}</el-col>
      </el-row>
      <el-row type="flex">
        <el-col>策略模板：&nbsp;&nbsp;
          <el-select @change="stmplChange" v-model="stmpl" placeholder="请选择策略模板" style="width: 400px;">
            <el-option v-for="item in stmplData" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <!-- <el-col :span="4" :offset="19">
          <el-input class="search-box" placeholder="搜索" icon="search" size="small" v-model="search" @keyup.enter.native="searchStrategyName"  @click="searchStrategyName"></el-input>
        </el-col> -->
      </el-row>
      <router-view :changeId="changeId" :editRule="editRule" @changeValue="changeValue"></router-view>
    </div>
    <div style="padding: 10px 15px;">
      <el-row>
        <el-col :span="16" class="strategy-btn">
          <el-button size="small" @click="prev">上一步</el-button>
          <el-button type="primary" size="small" @click="rependStrategy">下一步</el-button>
        </el-col>
      </el-row>
      <el-dialog :title="dialogTitle" :visible.sync="sysNewStrategyDialog" :close-on-press-escape="false" size="large">
        <new-strategy-vue @dialogChange="dialogChange" step="2"></new-strategy-vue>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import { Table, TableColumn, Row, Col, Button, Input, Select, Option, Popover, Radio, RadioGroup, Message, Pagination, Dialog } from 'element-ui'
  import newStrategyVue from '../../strategy/src/create.vue'
  export default {
    data () {
      return {
        strategyDescription:'',
        strategyLevel:'',
        strategyName: '',
        detail:false,
        recordPage: 1,
        strategyListData: [],
        sysNewStrategyDialog: false,
        req: false,
        strategyCodes: [],
        sysName: '',
        search: '',
        sysTips: sessionStorage.getItem('sysTips'),
        notInclude: sessionStorage.getItem('notInclude'),
        changeId: false,
        dialogTitle: '新建策略',
        dialogSize: 'large',
        strategyRadio: '',
        code: '',
        alarmName: sessionStorage.getItem('alarmName'),
        alarmDesc: sessionStorage.getItem('alarmName'),
        target: sessionStorage.getItem('target'),
        stmpl: this.$route.params.id,
        stmplData: [],
        editRule: false,
        flag: false
      }
    },
    created () {
      if (!sessionStorage.getItem('sysLevel')) {
        this.prev()
      }
      this.sysName = sessionStorage.getItem('curSystemName')
      this.$emit('changeStep', 2)
      this._initStrategyList()
    },
    watch: {
      search (v) {
        !v && this._initStrategyList()
      },
      strategyRadio (v) {
        this.strategyCodes[0] = this.code = this.strategyListData.data[v].strategyCode
        // console.log(v)
      }
    },
    methods: {
      changeValue (v) {
        if (this.flag) {
          return
        }
        this.flag = v
      },
      stmplChange (v) {
        this.changeId = !this.changeId
        this.$router.push({
          name: 'strategy-list-more',
          params: {
            id: v
          }
        })
      },
      async searchStrategyName () {
        if (!this.search) {
          return
        }
        var data = {
          size: 8,
          page: this.recordPage,
          name: this.search
        }
        if (this.notInclude) {
          data.notInclude = this.notInclude
        }
        var { data } = this.strategyListData = await this.api.searchStrategyName({data: data})
        
      },
      showSysNewStrategyDialog () {
        // this.sysStrategyDialog = false
        this.sysNewStrategyDialog = true
        
        this.$router.push('/alarm-create/instance/instance-strategy')
      },
      monitorStrategyChange (v) {
        var codes = []

        this.localCodeData = []
        v.some((v, i) => {
          this.localCodeData.push({
            strategyCode: v.strategyCode,
            strategyName: v.strategyName
          })
          codes.push(v.strategyCode)
        })
        this.strategyCodes = codes
      },
      recordCurrentChange (v) {
        this.recordPage = v
        this._initStrategyList()
      },
      prev () {
        this.$emit('changeStep', 1)
        sessionStorage.removeItem('sysLevel')
        sessionStorage.removeItem('notInclude')
        sessionStorage.removeItem('alarmName')
        sessionStorage.removeItem('alarmDesc')
        this.$router.push('/alarm-create/instance')
      },


      initDialog (code) { 
        this.dialogTitle = '策略详情'
        this.dialogSize = 'small'
        this.detail = true
        this.changeId = !this.changeId
        this.sysNewStrategyDialog = true
        // this.$router.push('/alarm-create/create-strategy/get/' + code)

        // this._searchStrategyName()
      },
      dialogChange () {
        this.req = false
        this.sysNewStrategyDialog = false
        this._initStrategyList()
      },
      async rependStrategy () {
        if (this.stmpl === '') {
          Message('请选择要策略模板')
          return
        }
        var notInclude = sessionStorage.getItem('notInclude')
        var newNotInclude = ''
        if (notInclude) {
          newNotInclude = notInclude.split(',').concat(this.strategyCodes)
        } else {
          newNotInclude = this.strategyCodes.join('')
        }
        if (newNotInclude.constructor.name === 'Array') {
          newNotInclude = newNotInclude.join(',')
        }
        // var strategyData = await this.api.strategyGetOne({data: {strategyCode: this.stmpl}})
        sessionStorage.setItem('notInclude', newNotInclude)
        var data = {
          code: sessionStorage.getItem('systemCode'),
          strategyCodes: [this.stmpl],
          type: sessionStorage.getItem('sysLevel'),
          // ruleVo: strategyData.data[0].ruleVO,
          alarmName: sessionStorage.getItem('alarmName'),
          alarmDesc: sessionStorage.getItem('alarmDesc')
        }
        var alarm = await this.api.sysStrategySave({data: data})
        if (alarm.msg === '成功') {
          sessionStorage.setItem('codeCheck', alarm.data[0].alarmCode)
        }
        if (this.flag) {
          this.editRule = !this.editRule
          console.log(22222222)
        }
        this.$router.push('/alarm-create/templates')
      },
      async _initStrategyList () {
        this.stmplData = []
        var data = {
          size: 8,
          page: this.recordPage
        }
        if (this.notInclude) {
          data.notInclude = this.notInclude
        }
        var { data } = this.strategyListData = await this.api.searchStrategyName({data: data})
        data.some((v, i) => {
          this.stmplData.push({
            label: v.strategyName,
            value: v.strategyCode
          })
        })
      },
      newStrategy () {
        this.sysNewStrategyDialog = true
        this.req = true
        this.dialogTitle = '新建策略'
        this.dialogSize = 'large'
        // this.$router.push('/alarm-create/create-strategy/instance-strategy')
      }
    },
    components: {
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-row': Row,
      'el-col': Col,
      'el-button': Button,
      'el-input': Input,
      'el-select': Select,
      'el-option': Option,
      'el-popover': Popover,
      'el-radio-group': RadioGroup,
      'el-radio': Radio,
      'el-pagination': Pagination,
      'el-dialog': Dialog,
      newStrategyVue
    }
  }
</script>
<style lang="scss" scoped>
   
  .create-title {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
    font-size: 16px;
    margin-bottom: 30px;
    font-weight: normal;
  }
  .create-input {
    margin-bottom: 15px;
  }
  .create-rule {
    padding: 20px 0;
    border:1px solid #ddd;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
  }
  .create-rule-card {
    margin-bottom: 25px;
    position: relative;
    padding: 25px 0 50px;
    border-radius: 5px;
    border:1px solid #ddd;
    text-align: center;
    user-select: none;
  }
  .create-btn-container {
    margin-top: 25px;
    .create-btn {
      text-align: center;
    }
  }
  .interval {
    margin: 0 6px;
  }
  .rule {
    padding: 0 15px;
  }
  .rule-pad {
    padding-top: 20px;
  }
  .rule-more {
    color: #2b8dd1;
    cursor: pointer;
  }
  .rule-time {
    padding-bottom: 10px;
  }
  .threshold-input {
    width: 100px;
  }
  .rule-more-table {
    text-align: left;
  }
  .rule-close {
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 12px;
    top: 5px;
  }
  .rule-active {
    cursor: pointer;
    color: #2b8dd1;
  }
  .rule-select {
    width: 160px;
  }
  .rule-del-btn {
    cursor: pointer;
    color: #ff4949;
  }
  .rule-bottom-more {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-top: 1px solid #ddd;
    cursor: pointer;
  }
  .hovering:hover {
    background: #f9fafc;
    .el-icon-caret-bottom, .el-icon-caret-top {
      color: #20a0ff;
    }
  }
  .el-icon-caret-bottom, .el-icon-caret-top {
    color: #ddd;
  }
  .rule-threshold-input {
    width: 100px;
  }
  .create-space {
    height: 40px;
  }
  .sys-pagination {
    text-align: right;
    margin-top: 10px;
    .pagination {
      padding-right: 0!important;
    }
  }
  .strategy-btn {
    margin-top: 10px;
  }
  .filter-bar-sys-top {
    border-top: 1px solid #e5e5e5;
    line-height: 50px;
    padding: 0 15px;
  }
</style>

